<template>
  <div class="QR">
    <div class="content">
      <h3>{{ userName }}的门店分销二维码</h3>
      <div>
        <div>
          <img :src="qrcodeUrl" alt="" />
        </div>

        <p>15元互动学生卡套餐</p>
      </div>
    </div>
    <div>
      <van-button round type="info" class="btn" @click="downQr"
        >保存二维码</van-button
      >
      <van-button round type="warning" class="btn" @click="handlerShare"
        >分享二维码</van-button
      >
    </div>
  </div>
</template>
<script>
import { getQrCodeUrl } from './service/service.js'
export default {
  name: 'markeingQR',
  data () {
    return {
      userName: '',
      phone: '',
      qrcodeUrl: '',
      shareTitle: '',
      sharePicurl: require('@/assets/images/test.png'),
      shareUrl: ''
    }
  },
  created () {
    this.userName = this.$route.query.userName
    this.phone = this.$route.query.phone

    getQrCodeUrl()
      .then((res) => {
        const data = res.data
        if (data.ret !== 0) {
          this.$toast(data.msg)
          return false
        }
        this.qrcodeUrl = data.data.qrcodeUrl
        this.shareTitle = data.data.shareTitle
        this.shareUrl = data.data.shareUrl
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    downQr () {
      // 创建隐藏的可下载链接
      // const eleLink = document.createElement('a')
      // eleLink.download = 'erCode.jpg'
      // eleLink.style.display = 'none'
      // eleLink.href = this.qrcodeUrl
      // document.body.appendChild(eleLink)
      // eleLink.click()
      // document.body.removeChild(eleLink)
      this.$saveAs(this.qrcodeUrl, 'image.jpg')
    },

    handlerShare () {
      const id = 1
      if (navigator.userAgent.indexOf('iphone') > -1) {
        window.location.href = 'ios:shareToClassP(' + this.sharePicurl + ',' + this.shareTitle + ', , ,' + this.shareUrl + ',2 , , , ,' + id + ')'// 调用ios的函数
      } else {
        window.injs.shareToClassP(this.sharePicurl, this.shareTitle, '', '', this.shareUrl, '2', '', '', '', id)// 通过injs接口调用android的函数
      }
    }
  }
}
</script>
<style lang="less" scoped>
.QR {
  padding: 35px;
  box-sizing: border-box;

  .content {
    text-align: center;
    background: #fff;
    border-radius: 8px;
    padding: 0px 0 30px;
    margin-bottom: 15px;
    h3 {
      font-size: 20px;
      font-weight: 700;
      color: #333333;
      line-height: 50px;
      border-bottom: 1px dashed #dcdcdc;
      position: relative;
      &::before {
        content: "";
        width: 20px;
        height: 20px;
        display: block;
        border-radius: 50%;
        background: #f5f5f5;
        position: absolute;
        bottom: -10px;
        left: -10px;
      }
      &::after {
        content: "";
        width: 20px;
        height: 20px;
        display: block;
        border-radius: 50%;
        background: #f5f5f5;
        position: absolute;
        bottom: -10px;
        right: -10px;
      }
    }
    > div:last-child {
      width: 220px;
      // border: 1px solid #dddddd;
      padding: 10px;
      text-align: center;
      display: inline-block;
      margin-top: 20px;
      > div {
        width: 200px;
        height: 200px;
        border: 7px solid #f2f3f5;
        img {
          width: 100%;
        }
      }
      > p {
        margin-top: 20px;
        color: #333;
        font-size: 13px;
      }
    }
  }
  > div:last-child {
    display: flex;
    justify-content: space-around;
    .btn {
      padding: 0 30px;
      margin-top: 40px;
    }
  }
}
</style>
